<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="renderer" content="webkit" />
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css"/>

		<!-- 本页面的css -->
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/safeGroupRuler.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="safeGroupList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">订单管理</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
						<i @click="gotoReturnlastPage" class="icon el-icon-back"></i>{{safeGroupInfo.name}}</span>
					<div class="yz-tab-wrapper-parent">
						<div class="yz-tab-wrapper">
							<div :class="{'active': inOutTabIndex === 0}" @click="inOutTabIndex = 0" class="yz-tab-item">入方向</div>
							<div :class="{'active': inOutTabIndex === 1}" @click="inOutTabIndex = 1" class="yz-tab-item">出方向</div>
							<div :class="{'active': inOutTabIndex === 2}" @click="inOutTabIndex = 2" class="yz-tab-item">管理实例</div>
						</div>
					</div>

					<div class="button-wrapper  fboxRow">
						<div class="button-wrapper-left fboxRow">
							<div @click="handleClickCreate" class="yzButton newServer active">{{inOutTabIndex === 2 ? '关联实例' : '创建'}}</div>
						</div>
						<el-input class="mr-20" maxlength="50" @keyup.enter.native="searchSafegroupBykeyword" class="button-wrapper-right"
						 style="width: 220px" placeholder="请输入搜索内容" v-model="searchkeywords">
							<i @click="searchSafegroupBykeyword" slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>

					<!-- 这里只能使用v-show   不能使用v-if -->
					<div v-show="inOutTabIndex === 0" class="tab-content-wrapper first">
						<el-table ref="multipleTable" :data="tableDataIn" tooltip-effect="dark" @sort-change="changeCreateTimeSort">
							<el-table-column label="编号" width="auto">
								<template slot-scope="scope">
									{{scope.row.num}}
								</template>

							</el-table-column>


							<el-table-column label="描述" width="auto">
								<template slot-scope="scope">
									<span class="nowrapShowpointer">{{scope.row.desc}}</span>
								</template>
							</el-table-column>

							<el-table-column label="授权对象" width="auto">
								<template slot-scope="scope">
									{{scope.row.impowerObj}}
								</template>
							</el-table-column>

							<el-table-column label="协议类型" width="auto">
								<template slot-scope="scope">
									{{scope.row.httpType}}
								</template>
							</el-table-column>


							<el-table-column label="端口范围" width="auto">
								<template slot-scope="scope">
									{{scope.row.portRange}}
								</template>
							</el-table-column>

							<el-table-column sortable="custom" width="auto" label="创建时间">
								<template slot-scope="scope">
									{{scope.row.createTime}}
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<div class="opeartionButton-wrapper fboxRow">
										<span class="opeartionButton" @click="handleClickEditSafeGroupRuler(scope.row,'in')" class="opearButton">编辑</span>
										<span style="color: #F21C30;" class="opeartionButton" @click="handleClickRemoveSafeGroupRuler(scope.row)"
										 class="opearButton">删除</span>
									</div>

								</template>
							</el-table-column>


						</el-table>
						<div class="pagination-wrapper">
							<div class="total-wrapper">
								<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
								<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
									<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
							 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
							</el-pagination>
						</div>

					</div>

					<div v-show="inOutTabIndex === 1" class="tab-content-wrapper second">
						<el-table ref="multipleTable" :data="tableDataOut" tooltip-effect="dark" @sort-change="changeCreateTimeSort">
							<el-table-column label="编号" width="auto">
								<template slot-scope="scope">
									{{scope.row.num}}
								</template>

							</el-table-column>


							<el-table-column label="描述" width="auto">
								<template slot-scope="scope">
									<span class="nowrapShowpointer">{{scope.row.desc}}</span>
								</template>
							</el-table-column>

							<el-table-column label="授权对象" width="auto">
								<template slot-scope="scope">
									{{scope.row.impowerObj}}
								</template>
							</el-table-column>

							<el-table-column label="协议类型" width="auto">
								<template slot-scope="scope">
									{{scope.row.httpType}}
								</template>
							</el-table-column>


							<el-table-column label="端口范围" width="auto">
								<template slot-scope="scope">
									{{scope.row.portRange}}
								</template>
							</el-table-column>

							<el-table-column sortable="custom" width="auto" label="创建时间">
								<template slot-scope="scope">
									{{scope.row.createTime}}
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<div class="opeartionButton-wrapper fboxRow">
										<span class="opeartionButton" @click="handleClickEditSafeGroupRuler(scope.row,'out')" class="opearButton">编辑</span>
										<span style="color: #F21C30;" class="opeartionButton" @click="handleClickRemoveSafeGroupRuler(scope.row)"
										 class="opearButton">删除</span>
									</div>

								</template>
							</el-table-column>


						</el-table>
						<div class="pagination-wrapper">
							<div class="total-wrapper">
								<span class="totalSize">共有 {{pageInfoOut.totalSize}} 条记录</span>
								<el-select @change="handleSizeChange2" v-model="pageInfoOut.pagesize">
									<el-option v-for="item in pageOptionsOut" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<el-pagination :page-size="pageInfoOut.pagesize" @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
							 :current-page="pageInfoOut.currentPage" layout="prev, pager, next, jumper" :total="pageInfoOut.totalSize">
							</el-pagination>
						</div>

					</div>



					<div v-show="inOutTabIndex === 2" class="tab-content-wrapper third">
						<el-table ref="multipleTable" :data="tableDatalivingExample" tooltip-effect="dark">
							<el-table-column label="绑定实例名" width="auto">
								<template slot-scope="scope">
									{{scope.row.name}}
								</template>

							</el-table-column>


							<el-table-column label="类型" width="auto">
								<template slot-scope="scope">
									<span class="nowrapShowpointer">{{scope.row.type}}</span>
								</template>
							</el-table-column>

							<el-table-column label="实例状态" width="auto">
								<template slot-scope="scope">
									<p v-html="handlestatus(scope.row)"></p>
								</template>
							</el-table-column>

							<el-table-column label="私有IP" width="auto">
								<template slot-scope="scope">
									{{scope.row.ip}}
								</template>
							</el-table-column>

							<el-table-column label="操作">
								<template slot-scope="scope">
									<div class="opeartionButton-wrapper fboxRow">
										<span class="opeartionButton" @click="handleClickJiebanglivingExample(scope.row)" class="opearButton">解绑实例</span>
										<span class="opeartionButton" @click="handleClickConnectOtherSafeGroup(scope.row)" class="opearButton">关联其他安全组</span>
									</div>

								</template>
							</el-table-column>


						</el-table>
						<div class="pagination-wrapper">
							<div class="total-wrapper">
								<span class="totalSize">共有 {{pageInfolivingExample.totalSize}} 条记录</span>
								<el-select @change="handleSizeChange2" v-model="pageInfolivingExample.pagesize">
									<el-option v-for="item in pageOptionslivingExample" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<el-pagination :page-size="pageInfolivingExample.pagesize" @size-change="handleSizeChange3" @current-change="handleCurrentChange3"
							 :current-page="pageInfolivingExample.currentPage" layout="prev, pager, next, jumper" :total="pageInfolivingExample.totalSize">
							</el-pagination>
						</div>

					</div>


				</div>
			</div>


			<el-dialog @closed="closedcreateSafeGroupRulerDialog" style="box-sizing: border-box;" width="1040px" class="yz-el-dialog"
			 :visible.sync="createSafeGroupRulerDialogVisble">
				<div slot="title" class="dialog-title">
					创建安全组规则
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxCol mb-20">
						<el-form :model="createSafeGroupRulerForm" ref="createSafeGroupRulerForm" :rules="createSafeGroupRulerRules"
						 label-width="0px">
							<el-table ref="multipleTable" :data="[createSafeGroupRulerForm]" tooltip-effect="dark">
								<el-table-column label="规则描述" width="auto">
									<template slot-scope="scope">
										<el-form-item prop="desc">
											<el-input maxlength="50" type="text" class="card-box-input" placeholder="请输入安全组规则描述" v-model="createSafeGroupRulerForm.desc">

											</el-input>
										</el-form-item>
									</template>

								</el-table-column>


								<el-table-column label="规则方向" width="100">
									<template slot-scope="scope">
										<el-form-item>
											<el-input :disabled="true" type="text" class="card-box-input" :value="inOutTabIndex === 0 ?  '入方向'  : '出方向'">

											</el-input>
										</el-form-item>
									</template>
								</el-table-column>

								<el-table-column label="授权对象" width="auto">
									<template slot-scope="scope">
										<el-form-item>
											<el-select v-model="createSafeGroupRulerForm.activeimpowerObj">
												<el-option v-for="item in createSafeGroupRulerForm.impowerObjOptions" :key="item.id" :label="item.label"
												 :value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>

								<el-table-column label="协议类型" width="auto">
									<template slot-scope="scope">
										<el-form-item>
											<el-select v-model="createSafeGroupRulerForm.activeHttpType">
												<el-option v-for="item in createSafeGroupRulerForm.httpTypeOptions" :key="item.id" :label="item.label"
												 :value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>


								<el-table-column label="端口范围" width="150">
									<template slot-scope="scope">
										<el-form-item prop="portRange">
											<el-input type="text" class="card-box-input" placeholder="请输入端口范围" v-model="createSafeGroupRulerForm.portRange">

											</el-input>
										</el-form-item>
									</template>
								</el-table-column>

							</el-table>
						</el-form>
					</div>


					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmCreateSafeGroupRuler" class="yzButton  confirm">创建</div>
						<div @click="createSafeGroupRulerDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>

			<el-dialog style="box-sizing: border-box;" width="1040px" class="yz-el-dialog" :visible.sync="editSafeGroupRulerDialogVisble">
				<div slot="title" class="dialog-title">
					编辑安全组规则
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxCol mb-20">
						<el-form :model="editSafeGroupRulerForm" ref="editSafeGroupRulerForm" :rules="createSafeGroupRulerRules"
						 label-width="0px">
							<el-table ref="multipleTable" :data="[editSafeGroupRulerForm]" tooltip-effect="dark">
								<el-table-column label="规则描述" width="auto">
									<template slot-scope="scope">
										<el-form-item prop="desc">
											<el-input maxlength="50" type="text" class="card-box-input" placeholder="请输入安全组规则描述" v-model="editSafeGroupRulerForm.desc">

											</el-input>
										</el-form-item>
									</template>

								</el-table-column>


								<el-table-column label="规则方向" width="100">
									<template slot-scope="scope">
										<el-form-item>
											<el-input :disabled="true" type="text" class="card-box-input" :value="inOutTabIndex === 0 ?  '入方向'  : '出方向'">

											</el-input>
										</el-form-item>
									</template>
								</el-table-column>

								<el-table-column label="授权对象" width="auto">
									<template slot-scope="scope">
										<el-form-item>
											<el-select v-model="editSafeGroupRulerForm.activeimpowerObj">
												<el-option v-for="item in editSafeGroupRulerForm.impowerObjOptions" :key="item.id" :label="item.label"
												 :value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>

								<el-table-column label="协议类型" width="auto">
									<template slot-scope="scope">
										<el-form-item>
											<el-select v-model="editSafeGroupRulerForm.activeHttpType">
												<el-option v-for="item in editSafeGroupRulerForm.httpTypeOptions" :key="item.id" :label="item.label" :value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>


								<el-table-column label="端口范围" width="150">
									<template slot-scope="scope">
										<el-form-item prop="portRange">
											<el-input type="text" class="card-box-input" placeholder="请输入端口范围" v-model="editSafeGroupRulerForm.portRange">

											</el-input>
										</el-form-item>
									</template>
								</el-table-column>

							</el-table>
						</el-form>
					</div>


					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmEditSafeGroupRuler" class="yzButton  confirm">保存</div>
						<div @click="editSafeGroupRulerDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>



			<el-dialog @closed="closedrelevanceCloudDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="relevanceCloudDialogVisble">
				<div slot="title" class="dialog-title">
					关联云主机
				</div>
				<div class="dialog-content">
					<!-- 这里不能使用v-model -->
					<el-form :rules="relevanceCloudrules" :model="relevanceCloudForm" ref="relevanceCloudForm" label-width="120px">
						<el-form-item prop="selectRelevanceCloud" label="选择云主机:">
							<el-select v-model="relevanceCloudForm.selectRelevanceCloud" multiple collapse-tags placeholder="请选择">
								<el-option v-for="item in relevanceCloudGroup" :key="item.id" :label="item.label" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>


					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRelevanceCloud" class="yzButton  confirm">保存</div>
						<div @click="relevanceCloudDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>



			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="removeSafeGroupRulerDialogVisble">
				<div slot="title" class="dialog-title">
					删除安全组规则
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png" />
						<p class="fboxCenter" style="line-height: 25px;">
							删除安全组规则会影响该安全组作用的实例。
						</p>
					</div>
					<el-table :data="[removeSafeGroupRulerForm]" style="width: 100%;margin-top: 10px;margin-bottom: 50px;">
						<el-table-column prop="httpType" label="协议类型" width="auto">
						</el-table-column>
						<el-table-column prop="portRange" label="端口范围" width="auto">
						</el-table-column>
					</el-table>

					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRemoveSafeGroup" class="yzButton  confirm">确认</div>
						<div @click="removeSafeGroupRulerDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>

			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="jiebanglivingExampleDialogVisble">
				<div slot="title" class="dialog-title">
					解绑实例
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png" />
						<p class="fboxCenter" style="line-height: 25px;">
							您确定要解绑该安全组，解绑后导致实例访问规则发生改变，请慎重！
						</p>
					</div>

					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmJiebanglivingExample" class="yzButton  confirm">确认</div>
						<div @click="jiebanglivingExampleDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>

			<el-dialog @closed="closedOtherSafeGroupDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="connectOtherSafeGroupDialogVisble">
				<div slot="title" class="dialog-title">
					关联其他安全组
				</div>
				<div class="dialog-content" style="min-height:200px;">
					<!-- 这里不能使用v-model -->
					<p class="dialog-content-desc mb-20">绑定另外的安全组将会默认解绑当前的绑定的安全组</p>
					<el-form :rules="relevanceCloudrules" :model="connectOtherSafeGroupForm" ref="connectOtherSafeGroupForm"
					 label-width="120px">
						<el-form-item prop="selectRelevanceCloud" label="选择云主机:">
							<el-select v-model="connectOtherSafeGroupForm.selectRelevanceCloud" placeholder="请选择实例">
								<el-option v-for="item in connectOtherSafeGroupOptions" :key="item.id" :label="item.label" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>


					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmConnectOtherSafeGroup" class="yzButton  confirm">确认</div>
						<div @click="connectOtherSafeGroupDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>






		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.safeGroupList-wrapper',
				data: function() {
					// 端口范围表单校验
					var validatePortrange = function(rule, value, callback) {

						// +  匹配一次或多次 ；^ $ 必须在立面出现
						if (!/^[0-9\-]+$/.test(value)) {

							callback(new Error('取值是整数'))
						} else {
							
							try {
								
								let firstLetter = value.substring(0, 1) // 首字母
								
								let lastLetter = value.substring(value.length - 1, value.length) // 末字母
								let diffLength = 0 // - 出现的字数
								for(let i = 0;i  < value.length;  i ++) {
									if(value[i] === '-') {
										diffLength ++
									}
								}

								let num
								let num2
								if (diffLength > 1 || firstLetter === '-' || lastLetter === '-') {
									callback(new Error('取值是1 ~ 65535的整数'))
									return
								}
								
			
								if (value.indexOf('-') === -1) {
									num = Number(value)
									if (1 > num || num > 65535) {
										callback(new Error('端口的范围是 1 ~ 65535'))
									}
								} else {
									
									num = Number(value.split('-')[0])
									num2 = Number(value.split('-')[1])

									if (1 > num || num > 65535) {
										callback(new Error('端口的范围是 1 ~ 65535'))
										return
									}

									if (1 > num2 || num2 > 65535) {
										callback(new Error('端口的范围是 1 ~ 65535'))
										return
									}
								}

							} catch (e) {
								//TODO handle the exception
							}
						}
					}

					return {
						safeGroupInfo: {}, // 安全组信息
						inOutTabIndex: 0, // tab栏选择  0是入方向 1是出方向 2实例
						// 表格数据
						tableDataIn: [{ //入方向表格数据
							id: '2232312', // id
							num: '01', // 编号
							desc: '系统安全组', // 描述
							impowerObj: '蒙奇.D.路飞', // 授权对象
							activeimpowerObj: 1, // 授权对象 Id
							httpType: 'http', // 协议类型
							activeHttpType: 0, // 协议类型 Id
							portRange: 22, // 端口范围
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '34344', // id
							num: '02', // 编号
							desc: '系统安全组', // 描述
							impowerObj: 'BigMOM',
							activeimpowerObj: 2, // 授权对象 Id
							httpType: 'http', // 协议类型
							activeHttpType: 0, // 协议类型 Id
							portRange: 22, // 端口范围
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '2333', // id
							num: '03', // 编号
							desc: '系统安全组', // 描述
							impowerObj: '蒙奇.D.艾斯',
							activeimpowerObj: 3, // 授权对象 Id
							httpType: 'https', // 协议类型
							activeHttpType: 1, // 协议类型 Id
							portRange: 8, // 端口范围
							createTime: '2020-11-25 11:24:46' // 创建时间
						}],
						tableDataOut: [{ //出方向表格数据
							id: '32434', // id
							num: '01', // 编号
							desc: '系统安全组出', // 描述
							impowerObj: '白胡子', // 授权对象
							activeimpowerObj: 4, // 授权对象 Id
							httpType: 'http', // 协议类型
							activeHttpType: 0, // 协议类型 Id
							portRange: 22, // 端口范围
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '93291', // id
							num: '02', // 编号
							desc: '系统安全组出', // 描述
							impowerObj: '黑胡子',
							activeimpowerObj: 5, // 授权对象 Id
							httpType: 'http', // 协议类型
							activeHttpType: 0, // 协议类型 Id
							portRange: 22, // 端口范围
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '2443', // id
							num: '03', // 编号
							desc: '系统安全组出', // 描述
							impowerObj: '红发',
							activeimpowerObj: 6, // 授权对象 Id
							httpType: 'https', // 协议类型
							activeHttpType: 1, // 协议类型 Id
							portRange: 8, // 端口范围
							createTime: '2020-11-25 11:24:46' // 创建时间
						}],
						// 实例表格数据
						tableDatalivingExample: [{
							id: 1,
							name: '安全组1', // 绑定实例名
							type: '云服务器CVM', // 类型
							status: 'alive',
							ip: '123.23.0.156'
						}, {
							id: 2,
							name: '安全组2', // 绑定实例名
							type: '云服务器', // 类型
							status: 'alive',
							ip: '123.23.0.156'
						}, {
							id: 3,
							name: '安全组3', // 绑定实例名
							type: '吴丽丽服务器', // 类型
							status: 'alive',
							ip: '123.23.0.156'
						}],

						// 入方向分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],
						// 出方向分页信息
						pageInfoOut: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 51
						},

						// 实例分页信息
						pageInfolivingExample: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 51
						},
						pageOptionsOut: [{ // 出方向每页显示多少条
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],
						pageOptionslivingExample: [{ // 实例每页显示多少条
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],

						createSafeGroupRulerForm: { // 创建安全组规则的表单
							desc: undefined, // 规则描述
							rulerDirection: undefined, //  规则方向
							activeimpowerObj: undefined, // 选中的授权对象
							activeHttpType: undefined, // 选中的协议类型
							portRange: undefined, // 端口范围
							impowerObjOptions: [{ // 授权对象的数组
								label: '测试授权对象1',
								id: 11
							}, {
								label: '测试授权对象2',
								id: 22
							}, {
								label: '测试授权对象3',
								id: 33
							}],
							httpTypeOptions: [{
								label: 'http',
								id: 1
							}, {
								label: 'https',
								id: 2
							}]
						},
						editSafeGroupRulerForm: { // 编辑安全组规则的表单
							desc: undefined, // 规则描述
							rulerDirection: undefined, //  规则方向
							activeimpowerObj: undefined, // 选中的授权对象
							activeHttpType: undefined, // 选中的协议类型
							portRange: undefined, // 端口范围 
							impowerObjOptions: [], // 授权对象的数组
							httpTypeOptions: [] // 协议类型的数组
						},
						removeSafeGroupRulerForm: { // 删除安全组规则的表单

						},
						jiebanglivingExampleForm: { // 解绑实例的表单

						},
						connectOtherSafeGroupForm: { // 关联其他安全组的表单
							selectRelevanceCloud: undefined // 选择云主机Id
						},
						createSafeGroupRulerRules: { // 创建安全组form的表单验证
							portRange: [{
								required: true,
								message: '请输入端口范围',
								trigger: 'blur'
							}, {
								validator: validatePortrange,
								trigger: 'blur'
							}],
						},
						createSafeGroupRulerDialogVisble: false, // 创建安全组规则的dialog
						editSafeGroupRulerDialogVisble: false, // 编辑安全组规则的dialog
						removeSafeGroupRulerDialogVisble: false, // 删除安全组规则的dialog
						jiebanglivingExampleDialogVisble: false, // 解绑实例的dialog
						relevanceCloudGroup: [], // 关联实例数组
						connectOtherSafeGroupOptions: [], // 关联其他安全组数组
						connectOtherSafeGroupDialogVisble: false, // 关联其他安全组dialog
						searchkeywords: undefined, //  搜索关键字
						relevanceCloudDialogVisble: false, // 关联云主机的dialog
						relevanceCloudForm: {
							selectRelevanceCloud: undefined, // 选择关联的云主机  这里可以多选  所以是个数组
						},
						relevanceCloudrules: { // 关联云主机  表单验证规则
							selectRelevanceCloud: [{
								required: true,
								message: '请选择关联的云主机',
								trigger: 'blur'
							}],
						},

					}
				},

				methods: {
					// 点击返回按钮
					gotoReturnlastPage: function() {
						window.open('index.html', '_self')
					},
					// 入方向  翻页
					handleSizeChange: function(e) {
						console.log(e)
					},
					// 入方向   改变每页数
					handleCurrentChange: function(val) {
						console.log('当前页为xxxxx')
					},
					// 出方向  翻页
					handleSizeChange2: function(e) {
						console.log(e)
					},
					// 出方向   改变每页数
					handleCurrentChange2: function(val) {
						console.log('当前页为xxxxx')
					},

					// 实例  翻页
					handleSizeChange3: function(e) {
						console.log(e)
					},
					// 实例   改变每页数
					handleCurrentChange3: function(val) {
						console.log('当前页为xxxxx')
					},

					// 点击编辑安全组规则
					handleClickEditSafeGroupRuler: _throttle(function(row, key) {
						console.log('点击编辑安全组规则')
						if (key === 'in') {
							console.log('入方向')
						} else if (key === 'out') {
							console.log('出方向')
						}


						this.editSafeGroupRulerForm = deepCopy(row)
						this.editSafeGroupRulerForm.impowerObjOptions = [{
							id: 1,
							label: '蒙奇.D.路飞'
						}, {
							id: 2,
							label: 'BigMOM'
						}, {
							id: 3,
							label: '蒙奇.D.艾斯'
						}, {
							id: 4,
							label: '白胡子'
						}, {
							id: 5,
							label: '黑胡子'
						}, {
							id: 6,
							label: '红发'
						}]
						this.editSafeGroupRulerForm.httpTypeOptions = [{
							id: 0,
							label: 'http'
						}, {
							id: 1,
							label: 'https'
						}]
						this.editSafeGroupRulerDialogVisble = true
					}),
					// 创建安全组规则   或者  关联实例
					handleClickCreate: _throttle(function() {
						if (this.inOutTabIndex === 2) {
							// 管理实例
							this.handleClickRelevanceCloud()

						} else {
							// 重置表单状态
							try {
								this.$refs['createSafeGroupRulerForm'].resetFields()
							} catch (e) {
								//TODO handle the exception
							}

							//  出方向   入方向
							// 初始化选中框
							this.createSafeGroupRulerForm.activeimpowerObj = this.createSafeGroupRulerForm.impowerObjOptions.length > 0 ?
								this.createSafeGroupRulerForm.impowerObjOptions[0].id : undefined
							this.createSafeGroupRulerForm.activeHttpType = this.createSafeGroupRulerForm.httpTypeOptions.length > 0 ?
								this.createSafeGroupRulerForm.httpTypeOptions[0].id : undefined
							if (this.inOutTabIndex === 0) {
								this.createSafeGroupRulerForm.rulerDirection = 'in'
							} else if (this.inOutTabIndex === 1) {
								this.createSafeGroupRulerForm.rulerDirection = 'out'
							}

							this.createSafeGroupRulerDialogVisble = true
						}

					}),
					// 关闭创建安全组规则dialog
					closedcreateSafeGroupRulerDialog: function() {


					},

					// 确认创建安全组规则
					confirmCreateSafeGroupRuler: _throttle(function() {

						let that = this
						let isreturn = true
						that.$refs['createSafeGroupRulerForm'].validate(function(valid) {
							isreturn = false
						})
						if (!isreturn) {
							return false
						}

						console.log('确认创建安全组规则')
						console.log(that.createSafeGroupRulerForm)
						that.createSafeGroupRulerDialogVisble = false
					}),
					// 确认编辑安全组规则
					confirmEditSafeGroupRuler: _throttle(function() {
						let that = this
						let isreturn = true
						this.$refs['editSafeGroupRulerForm'].validate(function(valid) {
							isreturn = false
						})

						if (!isreturn) {
							return false
						}
						console.log('确认编辑安全组规则')
						console.log(that.editSafeGroupRulerForm)
						that.editSafeGroupRulerDialogVisble = false
					}),
					//  点击删除安全组规则
					handleClickRemoveSafeGroupRuler: _throttle(function(row) {
						this.removeSafeGroupRulerForm = deepCopy(row)
						this.removeSafeGroupRulerDialogVisble = true
					}),
					//  确认删除安全组规则
					confirmRemoveSafeGroup: _throttle(function() {
						// 现在选中的  
						// 这里可能需要id
						console.log(this.removeSafeGroupRulerForm)
						console.log('确认删除安全组规则')
						this.removeSafeGroupRulerDialogVisble = false
					}),
					//处理状态
					handlestatus: function(row) {
						//  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期; 重启中 restarting；释放 release；
						switch (row.status) {
							case 'alive':
								return '<p style="color:#3FBF70">运行中</p>'
							case 'start':
								return '<div style="color:#6462F3"><span >启动中</span><i class="icon el-icon-loading"></i></div>'
							case 'closing':
								return '<div style="color:#FF9416"><span >关机中</span><i class="icon el-icon-loading"></i></div>'
							case 'closed':
								return '<p >已关机</p>'
							case 'timeout':
								return '<p style="color:#F21C30">已过期</p>'
							case 'restarting':
								return '<div style="color:#6462F3"><span >重启中</span><i class="icon el-icon-loading"></i></div>'
							case 'release':
								return '<p>已释放</p>'
							default:
								break;
						}

					},

					// 关闭其他安全组的dialog
					closedOtherSafeGroupDialog: function() {

					},

					// 点击关联其他安全组
					handleClickConnectOtherSafeGroup: _throttle(function(row) {
						// 初始化
						try {
							// 初始化
							this.connectOtherSafeGroupForm.selectRelevanceCloud = undefined
							this.connectOtherSafeGroupOptions = []
							// 重置表单状态
							this.$refs['connectOtherSafeGroupForm'].resetFields()
						} catch (e) {
							//TODO handle the exception
						}

						console.log('点击关联其他安全组')
						this.connectOtherSafeGroupForm = deepCopy(row)
						console.log(this.connectOtherSafeGroupForm)
						this.connectOtherSafeGroupOptions = [{
							id: 1,
							label: '安全组1'
						}, {
							id: 2,
							label: '安全组2'
						}, {
							id: 3,
							label: '安全组3'
						}]
						this.connectOtherSafeGroupDialogVisble = true
					}),

					// 确认关联其他安全组
					confirmConnectOtherSafeGroup: _throttle(function(row) {
						let that = this
						let isreturn = true
						that.$refs['connectOtherSafeGroupForm'].validate(function(valid) {
							if (valid) {
								console.log('确认关联其他安全组')
								console.log(that.connectOtherSafeGroupForm)
								that.connectOtherSafeGroupDialogVisble = false
							} else {
								return
							}

						})
					}),


					// 关闭关联实例dialog
					closedrelevanceCloudDialog: function() {

					},
					//  确认关联实例
					confirmRelevanceCloud: _throttle(function() {
						let that = this
						this.$refs['relevanceCloudForm'].validate(function(valid) {
							if (valid) {
								console.log('确认关联实例')
								console.log(that.relevanceCloudForm)
								that.relevanceCloudDialogVisble = false
							} else {
								return false;
							}
						})
					}),
					// tab3 点击关联实例
					handleClickRelevanceCloud: _throttle(function() {
						// 初始化
						try {
							// 重置表单状态
							this.relevanceCloudForm.selectRelevanceCloud = []
							this.relevanceCloudGroup = []
							this.$refs['relevanceCloudForm'].resetFields()
						} catch (e) {
							//TODO handle the exception
						}

						// 这里写的是  测试数据   实际上由后台返回
						this.relevanceCloudGroup = [{
							id: '1',
							label: '云主机一'
						}, {
							id: '2',
							label: '云主机二'
						}, {
							id: '3',
							label: '云主机三'
						}, {
							id: '4',
							label: '云主机四'
						}, {
							id: '5',
							label: '云主机五'
						}]
						this.relevanceCloudDialogVisble = true
					}),

					//  点击解绑实例
					handleClickJiebanglivingExample: _throttle(function(row) {
						this.jiebanglivingExampleForm = deepCopy(row)
						this.jiebanglivingExampleDialogVisble = true
					}),

					// 确认解绑实例
					confirmJiebanglivingExample: _throttle(function() {
						console.log('确认解绑实例')
						console.log(this.jiebanglivingExampleForm)
						this.jiebanglivingExampleDialogVisble = false
					}),


					// 通过关键字 搜索安全组
					searchSafegroupBykeyword: function() {
						if (this.searchkeywords === '' || this.searchkeywords === undefined) {
							return
						}
						console.log('获取安全组数据', this.searchkeywords)
						console.log(this.inOutTabIndex)
					},
					// 改变创建时间排序
					changeCreateTimeSort: function(e) {
						console.log(e.order)
						if (e.order === 'descending') {
							console.log('降序排列')
						} else if (e.order === 'ascending') {
							console.log('升序排列')
						}
					},
					// 改变创建时间排序
					changeCreateTimeSortTab2: function(e) {
						console.log(e.order)
						if (e.order === 'descending') {
							console.log('降序排列')
						} else if (e.order === 'ascending') {
							console.log('升序排列')
						}
					},
				},
				mounted: function() {
					// 模拟根据安全组id 获取安全组信息
					this.safeGroupInfo = {
						name: '安全组一'
					}

				}

			})
		</script>
	</body>
</html>
